<template>
	<view class="PaymentResults">
		<view class="results f-background text-align">
			<view class="payment dis">
				<image class="width-height100" src="@/static/icons/gou.png" mode=""></image>
				<!-- <text class="iconfont color icon-chenggong"></text> -->
			</view>
			<view class="confirmation font-weight-600 color2 size-40">下单成功</view>
			<view class="font-weight-400 color5 size-28">您的订单我们已经收到，将尽快为您送达！</view>
			<u-button type="primary" :plain="true"
				:customStyle="{width: '300rpx',height: '82rpx',borderRadius: '22rpx',margin: '50rpx auto 0',borderRadius: '100rpx'}"
				color="rgba(153, 153, 153, 0.5)" @click="onJumpPage">
				<text class="color3 font-weight-600 size-34">查看订单</text>
			</u-button>
		</view>
		<view class="welfare f-background dis">
			<text class="font-weight-600 size-36">进群福利丨每日签到领 颗便利豆</text>
			<image class="welfare-img" src="@/static/icons/bld.png" mode=""></image>
		</view>
		<view class="codes text-align f-background" v-if="infoCode.qrCodeUrl">
			<view class="codes-img">
				<image 	show-menu-by-longpress class="width-height100" :src="infoCode.qrCodeUrl" mode=""></image>
			</view>
			<view class="font-weight-400 color2 size-34">长按识别图中二维码</view>
			<view class="strip"></view>
		</view>
		<!-- 		<view class="visible-area por">
			<image class="width-height100" :src="`${OnlineStatic}kuang.png`" mode=""></image>
			<view class="visible-rong poa width100">
				<view class="rong" :class="{'rongs' : options.type*1 == 2}">
					<image class="width-height100" show-menu-by-longpress :src="userInfo.qrCodeUrl" mode=""></image>
				</view>
				<view class="button dis">
					<text class="color font-weight-600 size-30">长按识别二维码</text>
				</view>
			</view>
			<image class="shou" :src="`${OnlineStatic}shou.png`" mode=""></image>
		</view> -->
	</view>
</template>

<script>
	import { GetQrCodeById } from "@/api/index"
	export default {
		data() {
			return {
				// OnlineStatic,
				infoCode: {},
				id: ''
			}
		},
		onLoad(options) {
			console.log('options', options.id)
			this.id = options.id
			this.userInfo = uni.getStorageSync('userInfo')
			this.postGetQrCodeById()
		},
		methods: {
			async postGetQrCodeById() {
				const params = {
					qrCodeType: 2, // 二维码类型 1.小区二维码 2.进群二维码
					communityId: uni.getStorageSync('addsData').communityId
				}
				const { data, code } = await GetQrCodeById(params)
				if (code == '200') {
					this.infoCode = data
				}
			},
			onJumpPage() {
				uni.redirectTo({
					url: `/packageOrder/details/substitute?id=${this.id}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.PaymentResults {
		height: 100vh;

		.results {
			padding: 30rpx 0 48rpx;

			.confirmation {
				margin: 10rpx 0 24rpx;
			}

			.payment {
				width: 120rpx;
				height: 120rpx;
				margin: 0 auto;
			}

		}

		.welfare {
			padding: 44rpx 0 42rpx;
			color: #E38134;
			border-top: 20rpx solid #F7F7F7;
			border-bottom: 20rpx solid #F7F7F7;

			.welfare-img {
				width: 42rpx;
				height: 36rpx;
				margin-left: 12rpx;
			}
		}

		.codes {
			padding: 140rpx 0 128rpx;

			.codes-img {
				width: 440rpx;
				height: 440rpx;
				border-radius: 24rpx;
				margin: 0 auto 40rpx;
				padding: 20rpx;
				box-sizing: border-box;
				border: 1px solid rgba(153, 153, 153, 0.5);
			}

			.strip {
				width: 120rpx;
				height: 20rpx;
				background: linear-gradient(270deg, #FAD8B4 0%, #FFE9D2 100%);
				border-radius: 100rpx;
				margin: 40rpx auto 0;
			}
		}
	}
</style>